<template>
    <el-form ref="ruleFormRef" :model="ruleForm" >
        <div v-if="id == 0">
            <div>先选择供应商</div>
            <component :is="teamSelect" :data="uploadData" @onTeam="onTeam" />
        </div>
        <el-descriptions class="mt10" size="small" border :column="2">
            <el-descriptions-item :span=2>
                <template #label>
                    <div class="cell-item" style="width: 20px;">　　　　　</div>
                </template>
                <el-descriptions border :column="2">
                    <el-descriptions-item label="合同总金额　　　　"><el-text>{{ ruleForm.price }}</el-text></el-descriptions-item>
                    <el-descriptions-item label="税率　　　　　　　">
                        <el-select style="width: 200px;" v-model="ruleForm.tax_rate" placeholder="请选择" @change="onTax">
                            <el-option label="请选择" value="" />
                            <el-option label="1%" :value="1" />
                            <el-option label="3%" :value="3" />
                            <el-option label="6%" :value="6" />
                            <el-option label="9%" :value="9" />
                            <el-option label="13%" :value="13" />
                        </el-select>
                    </el-descriptions-item>
                    <el-descriptions-item label="税金　　　　　　　"><div style="width: 200px;"><el-text>{{ ruleForm.tax_price}}</el-text></div></el-descriptions-item>
                </el-descriptions>
            </el-descriptions-item>

            <el-descriptions-item :span="2">
                <template #label>
                    <div class="cell-item" style="width: 20px;">购买方信息</div>
                </template>
                <el-descriptions border :column="2">
                    <el-descriptions-item label="单位名称　　　　　"><div style="width: 200px;" ><el-text>{{ ruleForm.name }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="纳税人识别号　　　"><div style="width: 200px;" ><el-text>{{ ruleForm.tax_id }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="地址　　　　　　　"><div style="width: 200px;" ><el-text>{{ ruleForm.address }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="电话　　　　　　　"><div style="width: 200px;" ><el-text>{{ ruleForm.mobile }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="开户银行　　　　　"><div style="width: 200px;" ><el-text>{{ ruleForm.bank }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="开户行号　　　　　"><div style="width: 200px;" ><el-text>{{ ruleForm.bank_number }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="银行账号　　　　　"><div style="width: 200px;" ><el-text>{{ ruleForm.bank_account }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="邮箱　　　　　　　"><div style="width: 200px;" ><el-text>{{ ruleForm.email }}</el-text></div></el-descriptions-item>
                    <el-descriptions-item label="邮政编码　　　　　"><div style="width: 200px;" ><el-text>{{ ruleForm.postal_code }}</el-text></div></el-descriptions-item>
                </el-descriptions>
            </el-descriptions-item>

            <el-descriptions-item :span="2">
                <template #label>
                    <div class="cell-item" style="width: 20px;">劳务方信息</div>
                </template>
                <el-descriptions border :column="2">
                    <el-descriptions-item label="单位名称　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.b_name"  /></div></el-descriptions-item>
                    <el-descriptions-item label="纳税人识别号　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.b_tax_id"  /></div></el-descriptions-item>
                    <el-descriptions-item label="地址　　　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.b_address"  /></div></el-descriptions-item>
                    <el-descriptions-item label="电话　　　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.b_mobile"  /></div></el-descriptions-item>
                    <el-descriptions-item label="开户银行　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.b_bank"  /></div></el-descriptions-item>
                    <el-descriptions-item label="开户行号　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.b_bank_number"  /></div></el-descriptions-item>
                    <el-descriptions-item label="银行账号　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.b_bank_account"  /></div></el-descriptions-item>
                    <el-descriptions-item label="邮箱　　　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.b_email"  /></div></el-descriptions-item>
                    <el-descriptions-item label="邮政编码　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.b_postal_code"  /></div></el-descriptions-item>
                    <el-descriptions-item label="上传公司营业执照　">
                        <div style="width: 200px;" >
                            <el-button type="primary"  @click="onUploadFile('b_business_file')"> 上传 </el-button>
                            <el-button :type="ruleForm.b_business_file ? 'primary' : 'info'"  @click="onShowFile(ruleForm.b_business_file)"> 查看 </el-button>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="上传法人身份证　　">
                        <div style="width: 200px;" >
                            <el-button type="primary"  @click="onUploadFile('b_idcard_file')"> 上传 </el-button>
                            <el-button :type="ruleForm.b_idcard_file ? 'primary' : 'info'"  @click="onShowFile(ruleForm.b_idcard_file)"> 查看 </el-button>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="企业法人　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.b_legal"  /></div></el-descriptions-item>
                    <el-descriptions-item label="企业法人联系电话　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.b_legal_mobile"  /></div></el-descriptions-item>
                    <el-descriptions-item label="代理人　　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.b_agent"  /></div></el-descriptions-item>
                    <el-descriptions-item label="代理人联系电话　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.b_agent_mobile"  /></div></el-descriptions-item>
                    <el-descriptions-item label="上传委托代理授权书">
                        <div style="width: 200px;" >
                            <el-button type="primary"  @click="onUploadFile('b_authorize_file')"> 上传 </el-button>
                            <el-button :type="ruleForm.b_authorize_file ? 'primary' : 'info'"  @click="onShowFile(ruleForm.b_authorize_file)"> 查看 </el-button>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="上传代理人身份证　">
                        <div style="width: 200px;" >
                            <el-button type="primary"  @click="onUploadFile('b_agent_idcard_file')"> 上传 </el-button>
                            <el-button :type="ruleForm.b_agent_idcard_file ? 'primary' : 'info'"  @click="onShowFile(ruleForm.b_agent_idcard_file)"> 查看 </el-button>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="上传合同扫描件　　">
                            <el-button type="primary"  @click="onUploadFile('contract_canned')"> 上传 </el-button>
                            <el-button :type="ruleForm.contract_canned ? 'primary' : 'info'"  @click="onShowFile(ruleForm.contract_canned)"> 查看 </el-button>
                        </el-descriptions-item>
                </el-descriptions>
            </el-descriptions-item>

            <el-descriptions-item :span="2" v-if="ruleForm.type == '个人'">
                <template #label>
                    <div class="cell-item" style="width: 20px;">个人劳务方信息</div>
                </template>
                <el-descriptions border :column="2">
                    <el-descriptions-item label="姓名　　　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.u_name"  /></div></el-descriptions-item>
                    <el-descriptions-item label="工种　　　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.u_work"  /></div></el-descriptions-item>
                    <el-descriptions-item label="身份证号码　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.u_idard"  /></div></el-descriptions-item>
                    <el-descriptions-item label="家庭地址　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.u_address"  /></div></el-descriptions-item>
                    <el-descriptions-item label="手机号码　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.u_mobile"  /></div></el-descriptions-item>
                    <el-descriptions-item label="邮箱　　　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.u_email"  /></div></el-descriptions-item>
                    <el-descriptions-item label="上传身份证　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.u_idard_file"  /></div></el-descriptions-item>
                    <el-descriptions-item label="家庭联系人　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.u_contacts"  /></div></el-descriptions-item>
                    <el-descriptions-item label="联系人电话　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.u_contacts_mobile"  /></div></el-descriptions-item>
                    
                    <el-descriptions-item label="施工地点　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.build_address"  /></div></el-descriptions-item>
                    <el-descriptions-item label="签收人　　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.receiver"  /></div></el-descriptions-item>
                    <el-descriptions-item label="工作数量　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.sums"  /></div></el-descriptions-item>
                    <el-descriptions-item label="工作单价　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.unit_price"  /></div></el-descriptions-item>
                    <el-descriptions-item label="付款方式　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.pay_type"  /></div></el-descriptions-item>
                    <el-descriptions-item label="违约金　　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.liquidated_damages"  /></div></el-descriptions-item>
                    <el-descriptions-item label="工艺要求　　　　　"><div style="width: 200px;" ><el-input size="small" v-model="ruleForm.craft"  /></div></el-descriptions-item>
                    <el-descriptions-item label="上传合同扫描件　　">
                        <el-button type="primary"  @click="onUploadFile('u_contract_canned')"> 上传 </el-button>
                        <el-button :type="ruleForm.u_contract_canned ? 'primary' : 'info'"  @click="onShowFile(ruleForm.u_contract_canned)"> 查看 </el-button>
                    </el-descriptions-item>
                </el-descriptions>
            </el-descriptions-item>

            <el-descriptions-item :span="2">
                <template #label>
                    <div class="cell-item" style="width: 20px;"></div>
                </template>
                <el-descriptions border :column="2">
                    <el-descriptions-item label="备注"><el-input size="small" v-model="ruleForm.remarks" :rows="4" type="textarea" :autosize="{ minRows: 4 }" /></el-descriptions-item>
                </el-descriptions>
            </el-descriptions-item>
            <el-descriptions-item :span=2>
                <template #label>
                    <div class="cell-item" style="width: 20px;">　　　　　</div>
                </template>
                <div class="mt20"><el-button type="primary" size="small" @click="insertDetails"> 添加 </el-button></div>
                <el-table :data="tableData" style="width: 100%;font-size: 16px;height: auto !important;">
                    <el-table-column prop="name" label="项目名称" show-overflow-tooltip align="center" />
                    <el-table-column prop="content" label="施工内容" show-overflow-tooltip align="center" />
                    <el-table-column prop="unit" label="单位" show-overflow-tooltip align="center" />
                    <el-table-column prop="unit_price" label="材料单价" show-overflow-tooltip align="center" />
                    <el-table-column prop="work_quantity" label="工程量" show-overflow-tooltip align="center" />
                    <el-table-column prop="price" label="合价" show-overflow-tooltip align="center" />
                    <el-table-column prop="remarks" label="备注" show-overflow-tooltip align="center" />
                    <el-table-column fixed="right" label="操作" width="180" align="center">
                        <template #default="scope">
                            <el-link type="primary" @click="onDetailsEdit(scope.row,scope.$index)" >编辑</el-link>
                            <el-popconfirm title="确定要删除么?" @confirm="onDetailsDelete(scope.$index)">
                                <template #reference>
                                    <el-link type="danger">删除</el-link>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </el-descriptions-item>
        </el-descriptions>
    </el-form>
    <div class="text-center mt30">
        <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存 </el-button>
        <el-button type="info" @click="router.go(-1)"> 返回 </el-button>
        <component :is="applyButton" model = "LaborContract" source = "LaborContract" type = "apply" :id = id />
        <component :is="applyRevoke" model = "LaborContract" source = "LaborContract" :id = id />
        <!-- <el-button @click="printElement"> 打印预览 </el-button> -->
    </div>

    <el-dialog v-model="showUpload" title="文件">
        <component :is="uploadFile" :data="uploadData" @saveUpload="saveUpload" />
    </el-dialog>

    <el-dialog v-model="isShowFile" title="文件" class="m0" width="80%" @close="onCloseFile" draggable>
        <component :is="showFile" :data="files"/>
    </el-dialog>

    <el-dialog v-model="isPrint" title="打印预览" width="900px">
        <component :is="laborContractForm" :data = id :type="true"/>
    </el-dialog>

    <el-dialog v-model="isDetails" title="明细" width="400px">
        <component :is="contractDetailsForm" :data="Details" @onDetails="onDetails" />
    </el-dialog>

</template>
  
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import http from '../../../../util/request';
import { ElMessage, FormInstance } from 'element-plus';
import uploadFile from '@/components/uploadFile.vue'
import showFile from '@/components/showFile.vue'
import contractDetailsForm from './contractDetailsForm.vue'
import router from '../../../../router';
import applyButton from "@/components/applyButton.vue";
import applyRevoke from "@/components/applyRevoke.vue";
import teamSelect from "@/components/teamSelect.vue";
import laborContractForm from "@/components/laborContractForm.vue";
const isPrint = ref<boolean>(false)
const showUpload = ref<boolean>(false)
let uploadData:any = ref({prefix:'labor/',type:''})
const isShowFile = ref<boolean>(false)
const files = ref('')

const loading = ref<boolean>(false)
const ruleFormRef = ref<FormInstance>()
const id:any = ref(useRouter().currentRoute.value.params.id)
interface Project {
    id: number
    title: string
}
const Project = ref<Project>({id:0,title:''})
let data:any = sessionStorage.getItem('project')
Project.value = JSON.parse(data);
let user:any = sessionStorage.getItem('user')
user = JSON.parse(user)

const ruleForm = ref<any>({})
const tableData = ref<any>([])
const Details = ref<any>({})
const isDetails = ref<boolean>(false)
const DetailsIndex = ref<number>(-1)

const submitForm = async (formEl: FormInstance | undefined) => {
    console.log(ruleForm.value)
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            let request:any = null
            ruleForm.value.type = '班组'
            ruleForm.value.details = JSON.stringify(tableData.value);
            if(ruleForm.value.id){
                request = http.patch('/labor/contract',ruleForm.value)
            }else{
                ruleForm.value.labor_id = id.value
                request = http.put('/labor/contract',ruleForm.value)
            }
            request.then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);
                    return
                }
                if(!ruleForm.value.id){
                    id.value = response.data.data.id
                }
                ElMessage.success(response.data.msg);
                getData()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const getData = () => {
    if(id.value == 0){
        return;
    }
    http.get('/laborContract/'+id.value).then((response:any)=>{
        if(response.data.data){
            ruleForm.value = response.data.data
            ruleForm.value.price = parseInt(ruleForm.value.price)
            tableData.value = response.data.data.details
        }
    })
}

const onTax = () => {
    ruleForm.value.tax_price = (parseInt(ruleForm.value.tax_rate) / 100 *  parseInt(ruleForm.value.price)).toFixed(2)
}

const getA = () => {
    http.get('/A').then((response:any)=>{
        if(response.data.data){
            ruleForm.value.name = response.data.data.name
            ruleForm.value.tax_id = response.data.data.tax_id
            ruleForm.value.address = response.data.data.address
            ruleForm.value.mobile = response.data.data.mobile
            ruleForm.value.bank_number = response.data.data.bank_number
            ruleForm.value.bank_account = response.data.data.bank_account
            ruleForm.value.bank = response.data.data.bank
            ruleForm.value.email = response.data.data.email
            ruleForm.value.postal_code = response.data.data.postal_code
        }
    })
}

const props = defineProps<{
    id:any,
}>()

watch(props,()=>{
    id.value = props.id
},{ immediate: true })

onMounted(()=>{
    getData()
    getA()
})

const onUploadFile = (type:string) => {
    uploadData.value.type = type
    if(type == 'b_business_file'){
        uploadData.value.image = ruleForm.value.b_business_file
    }
    if(type == 'b_idcard_file'){
        uploadData.value.image = ruleForm.value.b_idcard_file
    }
    if(type == 'b_authorize_file'){
        uploadData.value.image = ruleForm.value.b_authorize_file
    }
    if(type == 'b_agent_idcard_file'){
        uploadData.value.image = ruleForm.value.b_agent_idcard_file
    }
    if(type == 'contract_canned'){
        uploadData.value.image = ruleForm.value.contract_canned
    }
    if(type == 'u_contract_canned'){
        uploadData.value.image = ruleForm.value.u_contract_canned
    }
    
    uploadData.value.id = id.value
    showUpload.value = true
}

const saveUpload = (data:string) => {
    if(uploadData.value.type == 'b_business_file'){
        ruleForm.value.b_business_file = data
    }
    if(uploadData.value.type == 'b_idcard_file'){
        ruleForm.value.b_idcard_file = data
    }
    if(uploadData.value.type == 'b_authorize_file'){
        ruleForm.value.b_authorize_file = data
    }
    if(uploadData.value.type == 'b_agent_idcard_file'){
        ruleForm.value.b_agent_idcard_file = data
    }
    if(uploadData.value.type == 'contract_canned'){
        ruleForm.value.contract_canned = data
    }
    if(uploadData.value.type == 'u_contract_canned'){
        ruleForm.value.u_contract_canned = data
    }
    
    showUpload.value = false
}

const onShowFile = (file:string) => {
    if(!file){
        ElMessage.error('未上传文件');return
    }
    files.value = file
    isShowFile.value = true
}

const onCloseFile = () => {
    files.value = ''
}

const insertDetails = () => {
    DetailsIndex.value = -1;
    Details.value = {}
    isDetails.value = true
}

const onDetailsEdit = (data:any, index:number) => {
    DetailsIndex.value = index
    Details.value = data
    isDetails.value = true
}

const onDetailsDelete = (index:number) => {
    tableData.value.splice(index,1);
    ruleForm.value.price = 0;
    tableData.value.forEach((e:any) => {
        ruleForm.value.price += parseFloat(e.price)
    });
}

const onDetails = (data:any) => {
    if(DetailsIndex.value == -1){
        tableData.value.push(data);
    }else{
        tableData.value[DetailsIndex.value] = data
    }
    ruleForm.value.price = 0;
    tableData.value.forEach((e:any) => {
        ruleForm.value.price += parseFloat(e.price)
    });
    isDetails.value = false
}

const onTeam = (data:any) => {
    ruleForm.value.team_id = data.id
    ruleForm.value.b_name = data.name
    ruleForm.value.b_tax_id = data.tax_id
    ruleForm.value.b_address = data.address
    ruleForm.value.b_mobile = data.mobile
    ruleForm.value.b_bank = data.bank
    ruleForm.value.b_bank_number = data.bank_number
    ruleForm.value.b_bank_account = data.bank_account
    ruleForm.value.b_email = data.email
    ruleForm.value.b_postal_code = data.postal_code
    ruleForm.value.b_business_file = data.business_file
    ruleForm.value.b_idcard_file = data.idcard_file
    ruleForm.value.b_legal = data.legal
    ruleForm.value.b_legal_mobile = data.legal_mobile
    ruleForm.value.b_agent = data.agent
    ruleForm.value.b_agent_mobile = data.agent_mobile
    ruleForm.value.b_authorize_file = data.authorize_file
    ruleForm.value.b_agent_idcard_file = data.agent_idcard_file
}

</script>
<style scoped>
.contract{height: calc(100vh - 25vh);overflow-y: scroll;}
.b_ .el-input{width: 340px;}
</style>
